const gulp = require('gulp'),
      htmlmin = require('gulp-htmlmin'),
      uglify = require('gulp-uglify'),
      babel = require('gulp-babel'),
      cleanCss = require('gulp-clean-css'),
      connect = require('gulp-connect'),
      del = require('del'),
      sass = require('gulp-sass')

const paths = {  // 把所有要处理文件的源路径和目标路径做一个统一规划
    html:{
        src: 'src/**/*.html',
        dest: 'dist'
    },
    css:{
        src: 'src/css/**/*.scss',
        dest: 'dist/css'
    },
    js:{
        src: 'src/js/**/*.js',
        dest: 'dist/js'
    },
    libs:{
        src: 'src/libs/**/*',
        dest: 'dist/libs'
    },
    img:{
        src: 'src/images/**/*',
        dest: 'dist/images'
    }
}

const html = ()=>{
   return gulp.src(paths.html.src).pipe(htmlmin({
          removeComments: true,//清除HTML注释
          collapseWhitespace: true,//压缩HTML
          collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input checked />
          removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
          removeScriptTypeAttributes: false,//删除<script>的type="text/javascript"
          removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
          minifyJS: true,//压缩页面JS
          minifyCSS: true//压缩页面CSS 
    })).pipe(gulp.dest(paths.html.dest))
    .pipe(connect.reload())
}

const css = () => {
    return gulp.src(paths.css.src)
      .pipe(sass())
      .pipe(cleanCss())
      .pipe(gulp.dest(paths.css.dest))
      .pipe(connect.reload())
  }

  const js = () => {
    return gulp.src(paths.js.src)
      .pipe(babel({     
            presets: ['@babel/env']
      }))
      .pipe(uglify())
      .pipe(gulp.dest(paths.js.dest))
      .pipe(connect.reload())
  }

const img = () => gulp.src(paths.img.src).pipe(gulp.dest(paths.img.dest))

const libs = () => gulp.src(paths.libs.src).pipe(gulp.dest(paths.libs.dest))

const server = () => {
    return connect.server({
      root: 'dist',    
      port: 8888,      
      livereload: true 
    })
  }

const delDist = () => del(['dist'])


gulp.watch(paths.html.src, html)
gulp.watch(paths.css.src, css)
gulp.watch(paths.js.src, js)

module.exports.default = gulp.series(delDist, gulp.parallel(html, js, css, server, libs, img))
